@import '../custom.less';
@import './vars.less';

@color-picker-prefix-cls: ~'@{css-prefix}color-picker';

.@{color-picker-prefix-cls} {
  .inject-ColorPicker-vars();

  position: relative;
  width: 20px;
  height: 20px;
  border-radius: var(--tv-ColorPicker-border-radius-xs);
  border: 1px solid var(--tv-ColorPicker-border-color);
  box-sizing: content-box;
  padding: var(--tv-ColorPicker-padding-y) var(--tv-ColorPicker-padding-x);
  cursor: pointer;

  &:hover {
    border-color: #0067d1;
  }

  &--large {
    width: var(--tv-ColorPicker-size-large-width);
    height: var(--tv-ColorPicker-size-large-height);
  }

  &--small {
    width: var(--tv-ColorPicker-size-small-width);
    height: var(--tv-ColorPicker-size-small-height);
  }

  &--medium {
    width: var(--tv-ColorPicker-size-medium-width);
    height: var(--tv-ColorPicker-size-medium-height);
  }

  &--mini {
    width: var(--tv-ColorPicker-size-mini-width);
    height: var(--tv-ColorPicker-size-mini-height);
  }

  &__inner {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;

    svg {
      display: none;
    }
  }

  &--large &__inner {
    border-radius: 4px;
  }

  &--small &__inner {
    border-radius: 3px;
  }

  &--medium &__inner {
    border-radius: 3px;
  }

  &--mini &__inner {
    border-radius: 2px;
  }
}
